/**
 * @Creator: eyes
 * @Date: 2020/3/17
 * 指标/优/良/差选择表单项
 */

import React, {Fragment, useContext, useCallback} from 'react';
import {QuestionCircleFilled} from '@ant-design/icons';
import {Form} from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import {Select, Tooltip} from 'antd';
import {PERFORMANCE_LEVEL, TARGET_TYPE} from '~/utils/const';
import {StoreContext} from '../data';

const {Item: FormItem} = Form;
const {Option} = Select;

const popUpContainer = triggerNode => triggerNode.parentElement;

const ToolTipText = () => (
    <Fragment>
        <p>优: 小于等于1s</p>
        <p>良: 大于1s小于等于3s</p>
        <p>差: 大于3s</p>
    </Fragment>
);

export default function TargetSelector(props) {
    const {
        getFieldDecorator,
        onChange
    } = props;
    const {state: {targetType, levelType}} = useContext(StoreContext);

    const levelTypeChange = useCallback(levelType => {
        onChange({
            levelType
        });
    }, []);

    const targetTypeChange = useCallback(targetType => {
        onChange({
            targetType
        });
    }, []);

    return (
        <>
            <FormItem
                labelAlign="right"
                label="指标选择"
            >
                {
                    getFieldDecorator('TargetType', {
                        initialValue: targetType,
                        rules: [
                            {
                                required: true,
                            },
                        ],
                    })(
                        <Select
                            className="user-feature-select"
                            placeholder="请选择"
                            optionFilterProp="children"
                            getPopupContainer={popUpContainer}
                            onChange={targetTypeChange}
                            style={{width: 160}}
                        >
                            {Array.from(TARGET_TYPE).map(([key, value]) => (
                                <Option key={key} value={key}>
                                    {value}
                                </Option>
                            ))
                            }
                        </Select>,
                    )
                }
            </FormItem>
            <FormItem
                labelAlign="right"
                label="分位值"
            >
                {
                    getFieldDecorator('LevelType', {
                        initialValue: levelType,
                        rules: [
                            {
                                required: true,
                            },
                        ],
                    })(
                        <Select
                            className="user-feature-select"
                            placeholder="请选择"
                            optionFilterProp="children"
                            getPopupContainer={popUpContainer}
                            onChange={levelTypeChange}
                        >
                            <Option value={PERFORMANCE_LEVEL.EXCELLENT}>优</Option>
                            <Option value={PERFORMANCE_LEVEL.GOOD}>良</Option>
                            <Option value={PERFORMANCE_LEVEL.BAD}>差</Option>
                        </Select>,
                    )
                }
                <Tooltip placement="bottom" overlayClassName="measure-tooltip" title={ToolTipText}>
                    <QuestionCircleFilled style={{marginLeft: 12}} />
                </Tooltip>
            </FormItem>
        </>
    );
}
